<template>
  <div class="home">
    <el-title :title="title"></el-title>
    <div class="task_cn">
      <!-- <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane :label="item.name" v-for="(item,index) in lists" :key="index">
            <div class="task_ul">
                <ul>
                  <li v-for="(item2,index2) in item.child" :key="index2" @click="num=index2" :class="{active:num==index2}"><p @click="ctypeNoe(item2.id)">{{item2.name}}</p></li>
                </ul>
            </div> -->
      <el-task :ctypeTwo="ctypeTwo" :type="type" :ctype="ctype"></el-task>
      <!-- </el-tab-pane>
        </el-tabs> -->
    </div>
  </div>
</template>

<script>
import elTitle from '@/components/title'
import elTask from '@/components/news/news_list'
import { newclass } from '@/utils/index.js'

export default {
  data() {
    return {
      title: '项目列表',
      activeName: '0',
      lists: [],
      twoList: [],
      num: '0',
      ctypeTwo: '',
      type: '',
      ctype: '',
    }
  },
  watch: {},
  components: {
    elTitle,
    elTask,
  },
  beforeCreate() {
    newclass().then((res) => {
      console.log(res)
      this.lists = res.data
      this.twoList = res.data[0].childer
      console.log(this.lists)
      this.type = res.data[0].id
      this.ctype = res.data[0].childer[0].id
      console.log(this.ctype)
    })
  },
  methods: {
    ctypeNoe(val) {
      console.log(val)
      this.ctypeTwo = val
    },
    handleClick(tab, event) {
      console.log(tab, event)
      newclass().then((res) => {
        // this.$refs.ellist[0].sonFun(res.data[tab.index].child[0].id,res.data[tab.index].id);
        this.type = res.data[tab.index].id
        this.ctype = res.data[tab.index].child[0].id
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.task_cn::v-deep {
  background-color: white;
  margin-top: 20px;
  padding: 20px 25px;
  .is-top {
    padding: 0 7px;
  }
  .el-tabs__item {
    padding: 0 20px;
  }
  .el-tabs__header {
    margin-bottom: 15px;
  }
}
.task_ul {
  margin-bottom: 20px;
  margin-left: 10px;
}
.task_ul ul {
}
.task_ul ul li {
  display: inline-block;
  padding: 4px 15px;
  border-radius: 25px;
  font-size: 13px;
  margin-right: 15px;
}
.task_ul ul li:hover {
  cursor: pointer;
}
.active {
  background-color: #31bdce;
  color: white;
}
</style>
